<template>
  <div>
    <orderBEchart v-if="ischart"></orderBEchart>
    <FilterTable
      ref="tableB"
      :columns="columnsB"
      height="auto"
      :mergeCellMethod="objectSpanMethod"
      :onSyncTableData="syncDataHandle"
      :dataSource="dataSource"
      :isPagination="false"
      :isSelectColumn="false"
      :isColumnFilter="false"
      :onColumnsChange="columnsB => (this.columnsB = columnsB)"
      selectionType="single"
    ></FilterTable>
  </div>
</template>

<script>
import orderBEchart from '../echart/orderBEchart';

export default {
  name: 'BOrderTrendChart',
  data() {
    return {
      columnsB: this.createdTable(),
      dataSource: this.dataList,
      spanArr1: [] // 一个空的数组，用于存放每一行记录的合并数
    };
  },
  components: { orderBEchart },
  props: ['dataList', 'ischart'],
  mounted() {
    this.dataList = this.dataList || [];
    this.$forceUpdate();
  },
  methods: {
    createdTable() {
      return [
        {
          title: '营销大区',
          dataIndex: 'region',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '一月',
          dataIndex: 'january',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '二月',
          dataIndex: 'february',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '三月',
          dataIndex: 'march',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '前期结算未发',
          dataIndex: 'notIssued',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '四月',
          align: 'center',
          children: [
            {
              title: '1',
              dataIndex: 'one',
              align: 'center',
              width: 60
            },
            {
              title: '2',
              width: 60,
              align: 'center',
              dataIndex: 'tow'
            },
            {
              width: 60,
              align: 'center',
              title: '3',
              dataIndex: 'three'
            },
            {
              title: '4',
              align: 'center',
              width: 60,
              dataIndex: 'four'
            },
            {
              title: '5',
              align: 'center',
              width: 60,
              dataIndex: 'five'
            },
            {
              title: '6',
              align: 'center',
              width: 60,
              dataIndex: 'six'
            },
            {
              title: '7',
              align: 'center',
              width: 60,
              dataIndex: 'seven'
            },
            {
              title: '8',
              align: 'center',
              width: 60,
              dataIndex: 'eight'
            },
            {
              title: '9',
              align: 'center',
              width: 60,
              dataIndex: 'nine'
            },
            {
              title: '10',
              align: 'center',
              width: 60,
              dataIndex: 'ten'
            },
            {
              title: '11',
              align: 'center',
              width: 60,
              dataIndex: 'eleven'
            },
            {
              title: '12',
              align: 'center',
              width: 60,
              dataIndex: 'twelve'
            },
            {
              width: 60,
              title: '13',
              align: 'center',
              dataIndex: 'thirteen'
            },
            {
              title: '14',
              align: 'center',
              width: 60,
              dataIndex: 'fourteen'
            },
            {
              title: '15',
              align: 'center',
              width: 60,
              dataIndex: 'fifteen'
            },
            {
              title: '16',
              align: 'center',
              width: 60,
              dataIndex: 'sixteen'
            },
            {
              title: '17',
              align: 'center',
              width: 60,
              dataIndex: 'seventeen'
            },
            {
              title: '18',
              align: 'center',
              width: 60,
              dataIndex: 'eighteen'
            },
            {
              title: '19',
              align: 'center',
              width: 60,
              dataIndex: 'nineteen'
            },
            {
              title: '20',
              align: 'center',
              width: 60,
              dataIndex: 'twenty'
            },
            {
              title: '21',
              width: 60,
              align: 'center',
              dataIndex: 'twentyOne'
            },
            {
              title: '22',
              width: 60,
              align: 'center',
              dataIndex: 'twelveTwo'
            },
            {
              width: 60,
              title: '23',
              align: 'center',
              dataIndex: 'twentyThree'
            },
            {
              title: '24',
              align: 'center',
              width: 60,
              dataIndex: 'twentyFour'
            },
            {
              title: '25',
              align: 'center',
              width: 60,
              dataIndex: 'twentyFive'
            },
            {
              title: '26',
              align: 'center',
              width: 60,
              dataIndex: 'twentySix'
            },
            {
              title: '27',
              align: 'center',
              width: 60,
              dataIndex: 'twentySeven'
            },
            {
              title: '28',
              width: 60,
              align: 'center',
              dataIndex: 'twentyNight'
            },
            {
              title: '29',
              align: 'center',
              width: 60,
              dataIndex: 'twentyNine'
            },
            {
              title: '30',
              align: 'center',
              width: 60,
              dataIndex: 'thirty'
            }
          ]
        },
        {
          title: '月累计',
          dataIndex: 'monthlyAccumulation',
          filterType: 'input',
          align: 'center'
        },
        {
          title: '年累计',
          dataIndex: 'annualAccumulation',
          filterType: 'input',
          align: 'center'
        }
      ];
    },
    // 处理合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'region' && rowIndex !== 4) {
        if (column.property === 'region') {
          const _row = this.spanArr1[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
      // if (rowIndex === 4) {
      //   if (columnIndex === 0) {
      //     console.log('row:' + row['carSeries']);
      //     return [1, 2]; // 跨列
      //   } else if (columnIndex === 1) {
      //     return [0, 0]; // 第二列置空
      //   }
      // }
    },
    //  合并
    syncDataHandle(dataList) {
      if (!dataList.length) return;
      // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
      this.spanArr1 = [];
      for (let i = 0; i < dataList.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同(第1列)
          if (dataList[i].region === dataList[i - 1].region) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    }
  }
};
</script>

<style></style>
